<template>
  <PageWrapper title="巡护信息" dense contentFullHeight contentClass="flex">
    <!-- <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> -->
    <BasicTable @register="registerTable">
      <!-- <template #toolbar>
        <a-button type="primary" @click="handleCreate">添加</a-button>
      </template> -->
      <template #name="{ record }">
        <a @click="titleClick($event, record)">{{ record.name }}</a>
      </template>
      <template #status="{ record }">
        <span v-if="record.status === 1">未处理</span>
        <span v-if="record.status === 2">已处理</span>
      </template>
      <template #img="{ text }">
        <TableImg
          :size="60"
          :simpleShow="true"
          :srcPrefix="srcPrefix"
          :imgList="text ? text.map((v) => `/${v}`) : []"
        />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
              label: '',
            },
            {
              icon: 'ri:lock-password-line',
              onClick: handleEditPwd.bind(null, record),
              label: '',
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '',
              popConfirm: {
                title: '确认删除该用户吗?',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <ConfigModal @success="handleSuccess" @register="registerModal2" />
    <!-- <AccountModal @register="registerModal" @success="handleSuccess" />
    <ConfigModal @register="registerModal2" /> -->
    <!-- <EditPatrolPasswordModal @register="registerEditPwdModal" @success="handleSuccess" /> -->
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
  import { batchHandlePatrol, deletePatrolUser, getPatrolRecord } from '/@/api/sys/user';
  import { PageWrapper } from '/@/components/Page';
  // import DeptTree from './DeptTree.vue';

  import { useModal } from '/@/components/Modal';
  import { columns, searchFormSchema } from './table.data';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import AccountModal from './AccountModal.vue';
  import ConfigModal from './ConfigModal.vue';
  import moment from 'moment';
  // import EditPatrolPasswordModal from './EditPatrolPasswordModal.vue';
  // import DeptTree from './DeptTree.vue';
  import { isProdMode } from '/@/utils/env';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'PRecord',
    components: {
      BasicTable,
      PageWrapper,
      TableAction,
      TableImg,
      // AccountModal,
      ConfigModal,
      // EditPatrolPasswordModal,
    },
    setup() {
      let srcPrefix = '';
      // if (!isProdMode()) {
      //   srcPrefix = 'http://121.201.34.36:30080/';
      // }
      const { t } = useI18n();
      const [registerModal, { openModal }] = useModal();
      const [registerEditPwdModal, { openModal: o3 }] = useModal();

      const [registerModal2, { openModal: o2 }] = useModal();
      const [registerTable, { reload }] = useTable({
        // title: '账号列表',
        api: getPatrolRecord,
        columns,
        formConfig: {
          showActionButtonGroup: true,
          showAdvancedButton: true,
          fieldMapToTime: [['datetime', ['start_time', 'end_time'], 'X']],
          labelWidth: 90,
          schemas: searchFormSchema,
          // showResetButton: false,
          autoSubmitOnEnter: true,
          resetButtonOptions: {
            text: '批量确认',
          },
          resetFunc: () => {
            batchConfirm();
            return new Promise(() => false);
          },
        },
        // searchInfo: {
        //   pid: userStore.getUserInfo.id,
        // },
        beforeFetch: (res) => {
          res.start_time = moment(res.start_time * 1000)
            .startOf('day')
            .unix();
          res.end_time = moment(res.end_time * 1000)
            .endOf('day')
            .unix();
          return res;
        },
        indexColumnProps: {
          width: 80,
        },
        useSearchForm: true,
        showTableSetting: false,
        bordered: true,
        // actionColumn: {
        //   width: 120,
        //   title: '操作',
        //   dataIndex: 'action',
        //   slots: { customRender: 'action' },
        // },
      });

      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleEdit(record: Recordable) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }
      function handleEditPwd(record: Recordable) {
        o3(true, {
          record,
          isUpdate: true,
        });
      }

      function handleDelete(record: Recordable) {
        console.log(record);
        deletePatrolUser(record.id).then(
          () => {
            // msg
            handleSuccess();
          },
          () => {},
        );
      }
      const { createMessage } = useMessage();

      function batchConfirm() {
        batchHandlePatrol().then(() => {
          createMessage.success('批量处理成功！');
          reload();
        });
      }

      function handleSuccess() {
        reload();
      }

      // 点击图像相机编号事件，与行点击事件区分开，
      function titleClick(e: PointerEvent, item) {
        console.log(item);
        e.stopPropagation();
        o2(true, {
          data: item,
        });

        // 弹框展示当前图像信息
      }

      return {
        titleClick,
        registerTable,
        registerModal2,
        registerModal,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        t,
        registerEditPwdModal,
        handleEditPwd,
        srcPrefix,
      };
    },
  });
</script>
